<template>
  <div class="procedure">
    <div class="wrapper">
      <div class="header">
        <el-form :inline="true" size="small" label-width="84px">
          <div>
            <el-form-item label="位置">
              <el-cascader
                v-model="spacesModel"
                :props="spaceProps"
                :options="options"
                clearable
                @change="onChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="设备：">
              <el-select v-model="search.eid" placeholder="请选择">
                <el-option
                  v-for="item in equips"
                  :key="item.equipmentID"
                  :label="item.name"
                  :value="item.equipmentID"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getProcessAnaInfo">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="charts">
        <div class="chart" v-for="(item, index) in data" :key="index">
          <el-card style="height: 240px; display: block">
            <line-chart :height="'200px'" :data="item"></line-chart>
          </el-card>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import LineChart from "./components/LineChart";

export default {
  components: { LineChart },
  name: "procedure",
  data() {
    return {
      spacesModel: [],
      spaceProps: {
        lazy: false,
        checkStrictly: true
      },
      search: {
        sid: 0,
        eid: '',
        suid: 0,
      },
      data: [{ xdata: [0], ydata: [0] }],
    }
  },
  computed: {
    processAnaInfos() {
      return this.$store.state.datainterface.processAnaInfos
    },
    options() {
      return this.$store.state.space.options
    },
    equips() {
      return this.$store.state.equipment.equips
    },
  },
  methods: {
    async getProcessAnaInfo() {
      this.data = []
      if (this.search.eid) {
        await this.$store.dispatch('datainterface/ProcessAnaInfo', { eid: this.search.eid, suid: 0 })
        console.log(this.processAnaInfos)
        for (let item in this.processAnaInfos) {
          let data = { title: item, xName: "产品索引", yName: item }
          let arr = this.processAnaInfos[item]
          if (arr instanceof Array) {
            data.xdata = [0]
            data.ydata = [0]
            arr.forEach(e => {
              data.xdata.push(e.rowNum)
              data.ydata.push( e.value ? e.value : e.maxPis)
            })
            if (data.xdata.length == 0)
              data.xdata = [0]
            if (data.ydata.length == 0)
              data.ydata = [0]
          }
          this.data.push(data)
        }
      }
    },
    async onChange(val) {
      if (val.length > 0) {
        this.search.sid = val[val.length - 1]
        await this.$store.dispatch('equipment/getEquips', { page: 0, size: 0, spaceId: this.search.sid })
      }
    },
  },
  created() {},
  mounted() {
    this.$store.dispatch('space/GetSpaces', { name: '', parentid: '', page: 0, size: 0 })
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.procedure {
  width: 100%;
  padding: 30px;
  .header {
    margin-bottom: 10px;
  }
  .content .datainfo {
    margin-bottom: 20px;
    .dataitem {
      display: inline-block;
      margin-right: 20px;
      font-size: 14px;
    }
  }
  .charts {
    .chart {
      display: inline-block;
      width: 30%;
      margin: 1.5%;
      margin-bottom: 15px;
      height: 240px;
    }
  }
}
</style>